<template>
	<view>
		<cu-custom :isBack="true" :bgColor="'headerColor'" :backColor="'text-white'">
			<block slot="backText"><view class="text-white ">绑定银行卡</view></block>
		</cu-custom>
		<van-cell-group>
			<van-field :value="name" placeholder="请输入持卡人姓名" :border="false" required clearable label="持卡人姓名" @input="name = $event.detail" />
			<van-field :value="carNumber" placeholder="请输入银行卡号" :border="false" required clearable label="银行卡号" @input="carNumber = $event.detail" />
			<van-field :value="carName" placeholder="请输入开户行" :border="false" required clearable label="开户行" @input="carName = $event.detail" />
			<van-field :value="cNumber" placeholder="手机号" :border="false" label="手机号" @input="cNumber = $event.detail" readonly />

			<van-field :value="code" @input="code = $event.detail" size="large" label="验证码" placeholder="验证码" required :border="false">
				<van-button slot="button" size="small" type="primary" @click="smsStatus === 0 ? sms(cNumber) : $textToast(smsStatus + 's后再试')">
					{{ smsStatus == 0 ? '发送验证码' : smsStatus + 's' }}
				</van-button>
			</van-field>
		</van-cell-group>
		<view class="padding-xl"><button @click="submit" class="cu-btn block bg-black margin-tb-sm lg" :loading="false">确认</button></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			carName: '',
			carNumber: '',
			name: '',
			cNumber: '',

			code: '',
			timer1: null,
			smsStatus: 0
		};
	},
	onLoad() {
		this.$u.adminApi.getStoreTelephone({
			storeId:this.vuex_bussinessId
		}).then(res=>{
			if(res.code===200){
				this.cNumber=res.data.telephone
			}
		})
		this.$u.adminApi.getBank({
			storeId:this.vuex_bussinessId
		}).then(res=>{
			if(res.code===200){
				this.name=res.data.cname
				this.carName=res.data.carName
				this.carNumber=res.data.carNumber
			}
		})
	},
	methods: {
		submit(){
			this.$u.adminApi.addBank({
				storeId:this.vuex_bussinessId,
				carName:this.carName,
				carNumber:this.carNumber,
				name:this.name,
				cNumber:this.cNumber,
				code:this.code
			}).then(res=>{
				if(res.code===200){
					this.$successToast(res.message)
				}
			})
		},
		sms(phone) {
			this.$u.adminApi
				.sms({
					number: phone,
					select:0
				})
				.then(res => {
					if (res.code === 200) {
						const TIME_COUNT = 60;
						if (!this.timer1) {
							this.smsStatus = TIME_COUNT;
							this.timer1 = setInterval(() => {
								if (this.smsStatus > 0 && this.smsStatus <= TIME_COUNT) {
									this.smsStatus--;
								} else {
									clearInterval(this.timer1);
									this.timer1 = null;
								}
							}, 1000);
						}
						this.$textToast(res.message);
					}
				});
		},
		// 实时监听input输入为数字
		checkNum(e) {
			let val = e.target.value.replace(/(^\s*)|(\s*$)/g, '');
			if (!val) {
				this.Withdrawal = '';
				return;
			}
			var reg = /[^\d.]/g;

			// 只能是数字和小数点，不能是其他输入
			val = val.replace(reg, '');
			// // 保证第一位只能是数字，不能是点
			val = val.replace(/^\./g, '');
			// // 小数只能出现1位
			val = val
				.replace('.', '$#$')
				.replace(/\./g, '')
				.replace('$#$', '.');
			// // 小数点后面保留2位
			val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
			this.$nextTick(() => {
				this.Withdrawal = val;
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.balance {
	color: #fff;
	text-align: center;
	height: 370rpx;
	width: 100%;
	background-color: #24b360;
}
</style>
